// 吸顶设置
var nav = document.querySelector('.nav');
var navOffset = nav.offsetTop;

window.onscroll = function() {
  if (window.pageYOffset >= navOffset) {
    nav.classList.add('fixed-nav');
  } else {
    nav.classList.remove('fixed-nav');
  }
};
const images = [
    './images/banner1.png', 
    './images/banner2.png', 
    './images/banner3.png', 
    './images/banner4.png', 
    './images/banner5.png', 
    './images/banner6.png', 
    './images/banner7.png', 
    './images/banner8.png'
];
let counter = 0;

const image = document.getElementById('image');

image.addEventListener('click', () => {
    counter = (counter + 1) % images.length;
    image.src = images[counter];
});

const biaodaiList = [
    { src: './biaodai/ML763.png', text: '45毫米金色米兰尼斯表带',price:'RMB:779'},
    { src: './biaodai/MT653.png', text: '45毫米橙色海洋表带' ,price:'RMB:770'},
    { src: './biaodai/MTJ93ref.png', text: '45毫米蓝色磁力带',price:'RMB:799' },
    { src: './biaodai/MTL63.png', text: '45毫米nike回环带',price:'RMB:5000.0' },
    { src: './biaodai/MUV03ref.png', text: '45毫米白色米兰尼斯表带' ,price:'RMB:5000.0'},
    { src: './biaodai/MW4P3.png', text: '45毫米深蓝色布艺表带' ,price:'RMB:5000.0'},
    { src: './biaodai/MWFH3ref.png', text: '45毫米粉红色表带' ,price:'RMB:5000.0'},
    { src: './biaodai/MWM63ref.png', text: '45毫米玫红色表带',price:'RMB:5000.0' },
    { src: './biaodai/MWMU3ref.png', text: '45毫米蓝色表带' ,price:'RMB:5000.0'},
    { src: './biaodai/MWP93.png', text: '45毫米橙色表带',price:'RMB:5000.0' }
]
const len = biaodaiList.length

const ul = document.querySelector('.dotnav ul')
ul.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList = ul.querySelectorAll('.dot')


const watch_list = document.querySelector('.watch-list')
watch_list.innerHTML = biaodaiList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left = document.querySelector('.arrow-left')
const arrow_right = document.querySelector('.arrow-right')

let i = 0;
const changeImg = () => {
    watch_list.style.transform = `translateX(${-1070 * i}px)`
    if (i === 0) {
        arrow_left.style.display = 'none'
    } else if (i === Math.floor(len / 3)) {
        arrow_right.style.display = 'none'
    } else {
        arrow_left.style.display = 'block'
        arrow_right.style.display = 'block'
    }
    dovList.forEach(item => {
        item.classList.remove('active')
    })
    dovList[i].classList.add('active')
}
ul.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i = parseInt(target.dataset.index)
        changeImg()
    }
})

arrow_left.addEventListener('click', () => {
    i--
    changeImg()
})

arrow_right.addEventListener('click', () => {
    i++
    changeImg()
})
// 第二个轮播图
const iphoneList = [
    { src: './iphone/HR7N2.png', text: '绿色手机壳',price:'RMB:449'},
    { src: './iphone/HR052.png', text: '彩色手机壳' ,price:'RMB:449'},
    { src: './iphone/MT4L3.png', text: '暗红色手机壳',price:'RMB:329' },
    { src: './iphone/MT223.png', text: '棕色手机壳',price:'RMB:339'},
    { src: './iphone/MT243.png', text: '无线电宝' ,price:'RMB:559'},
    { src: './iphone/MU7U2.png', text: '充电头' ,price:'RMB:119'},
    { src: './iphone/MU883.png', text: '数据线' ,price:'RMB:169'},
    { src: './iphone/MUF82.png', text: '转接头带线',price:'RMB:200' },
    { src: './iphone/MUQX3.png', text: '转接线' ,price:'RMB:159'},
    { src: './iphone/MU2G3.png', text: '白色数据线',price:'RMB:169' }
]

const len1 = iphoneList.length

const ul2 = document.querySelectorAll('.dotnav ul')[1] // 选择第二个轮播图中的ul
ul2.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList2 = ul2.querySelectorAll('.dot')

const watch_list2 = document.querySelectorAll('.watch-list')[1] // 选择第二个轮播图中的watch-list
// 更改显示的图片
watch_list2.innerHTML = iphoneList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left2 = document.querySelectorAll('.arrow-left')[1] // 选择第二个轮播图中的左箭头
const arrow_right2 = document.querySelectorAll('.arrow-right')[1] // 选择第二个轮播图中的右箭头

let i2 = 0;
const changeImg2 = () => {
    watch_list2.style.transform = `translateX(${-1070 * i2}px)`
    if (i2 === 0) {
        arrow_left2.style.display = 'none'
    } else if (i2 === Math.floor(len1 / 3)) {
        arrow_right2.style.display = 'none'
    } else {
        arrow_left2.style.display = 'block'
        arrow_right2.style.display = 'block'
    }
    dovList2.forEach(item => {
        item.classList.remove('active')
    })
    dovList2[i2].classList.add('active')
}

ul2.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i2 = parseInt(target.dataset.index)
        changeImg2()
    }
})

arrow_left2.addEventListener('click', () => {
    i2--
    changeImg2()
})

arrow_right2.addEventListener('click', () => {
    i2++
    changeImg2()
})
// 第三个轮播图
const erjiList = [
    { src: './erji/erji1.png', text: 'AirPods Max',price:'RMB:4449'},
    { src: './erji/erji2.png', text: 'HomePod mini' ,price:'RMB:1999'},
    { src: './erji/erji3.png', text: 'HomePod',price:'RMB:2229' },
    { src: './erji/erji4.png', text: 'AirPods',price:'RMB:999'},
    { src: './erji/erji5.png', text: 'Beats Studio Buds' ,price:'RMB:3000'},
    { src: './erji/erji6.png', text: 'Beats Studio Pro' ,price:'RMB:3559'},
    { src: './erji/erji7.png', text: '有线蓝色' ,price:'RMB:999'},
    { src: './erji/erji8.png', text: '真无线耳机' ,price:'RMB:1299'},
    { src: './erji/erji9.png', text: 'AirPods(第二代)' ,price:'RMB:1999'},
    { src: './erji/erji9.png', text: 'AirPods(第三代)' ,price:'RMB:2599'},
]
const len2 = erjiList.length
const ul3 = document.querySelectorAll('.dotnav ul')[2] // 选择第二个轮播图中的ul
ul3.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList3 = ul3.querySelectorAll('.dot')

const watch_list3 = document.querySelectorAll('.watch-list')[2] // 选择第二个轮播图中的watch-list
watch_list3.innerHTML = erjiList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left3 = document.querySelectorAll('.arrow-left')[2] // 选择第二个轮播图中的左箭头
const arrow_right3 = document.querySelectorAll('.arrow-right')[2] // 选择第二个轮播图中的右箭头

let i3 = 0;
const changeImg3 = () => {
    watch_list3.style.transform = `translateX(${-1070 * i3}px)`
    if (i3 === 0) {
        arrow_left3.style.display = 'none'
    } else if (i3 === Math.floor(len2 / 3)) {
        arrow_right3.style.display = 'none'
    } else {
        arrow_left3.style.display = 'block'
        arrow_right3.style.display = 'block'
    }
    dovList3.forEach(item => {
        item.classList.remove('active')
    })
    dovList3[i3].classList.add('active')
}

ul3.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i3 = parseInt(target.dataset.index)
        changeImg3()
    }
})

arrow_left3.addEventListener('click', () => {
    i3--
    changeImg3()
})

arrow_right3.addEventListener('click', () => {
    i3++
    changeImg3()
})
//第四个 ipad轮播图
const iPadList = [
    { src: './ipad/ipad1.png', text: '一代笔',price:'RMB:799'},
    { src: './ipad/ipad2.png', text: 'Ipad(第十代)' ,price:'RMB:2999'},
    { src: './ipad/ipad3.png', text: '蓝色壳子',price:'RMB:50' },
    { src: './ipad/ipad4.png', text: '二代笔',price:'RMB:999'},
    { src: './ipad/ipad5.png', text: 'Ipad Air' ,price:'RMB:3500'},
    { src: './ipad/ipad6.png', text: '深蓝色壳子' ,price:'RMB:50'},
    { src: './ipad/ipad7.png', text: '三代笔' ,price:'RMB:999'},
    { src: './ipad/ipad8.png', text: 'Ipad Pro' ,price:'RMB:6999'},
    { src: './ipad/ipad9.png', text: '黄色壳子' ,price:'RMB:50'},
    { src: './ipad/ipad10.png', text: '四代笔' ,price:'RMB:1399'},
]

const len3 = iPadList.length
const ul4 = document.querySelectorAll('.dotnav ul')[3] // 选择第二个轮播图中的ul
ul4.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList4 = ul4.querySelectorAll('.dot')

const watch_list4 = document.querySelectorAll('.watch-list')[3] // 选择第二个轮播图中的watch-list
watch_list4.innerHTML = iPadList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left4 = document.querySelectorAll('.arrow-left')[3] // 选择第二个轮播图中的左箭头
const arrow_right4 = document.querySelectorAll('.arrow-right')[3] // 选择第二个轮播图中的右箭头

let i4 = 0;
const changeImg4 = () => {
    watch_list4.style.transform = `translateX(${-1070 * i4}px)`
    if (i4 === 0) {
        arrow_left4.style.display = 'none'
    } else if (i4 === Math.floor(len3 / 3)) {
        arrow_right4.style.display = 'none'
    } else {
        arrow_left4.style.display = 'block'
        arrow_right4.style.display = 'block'
    }
    dovList4.forEach(item => {
        item.classList.remove('active')
    })
    dovList4[i4].classList.add('active')
}

ul4.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i4 = parseInt(target.dataset.index)
        changeImg4()
    }
})

arrow_left4.addEventListener('click', () => {
    i4--
    changeImg4()
})

arrow_right4.addEventListener('click', () => {
    i4++
    changeImg4()
})
//第五个 Mac轮播图
const macList = [
    { src: './Mac/Mac1.png', text: 'Studio Display',price:'RMB:11799'},
    { src: './Mac/Mac2.png', text: '秒控板' ,price:'RMB:599'},
    { src: './Mac/Mac3.png', text: '无线充电器',price:'RMB:699' },
    { src: './Mac/Mac4.png', text: '转接头',price:'RMB:600'},
    { src: './Mac/Mac5.png', text: '鼠标' ,price:'RMB:189'},
    { src: './Mac/Mac6.png', text: '数据线' ,price:'RMB:199'},
    { src: './Mac/Mac7.png', text: '三代笔' ,price:'RMB:999'},
    { src: './Mac/Mac8.png', text: '键盘' ,price:'RMB:899'},
    { src: './Mac/Mac9.png', text: '黑色数据线' ,price:'RMB:120'},
    { src: './Mac/Mac10.png', text: '抛光布' ,price:'RMB:159'},
]
const len4 = macList.length
const ul5 = document.querySelectorAll('.dotnav ul')[4] // 选择第二个轮播图中的ul
ul5.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList5 = ul5.querySelectorAll('.dot')

const watch_list5 = document.querySelectorAll('.watch-list')[4] // 选择第二个轮播图中的watch-list
watch_list5.innerHTML = macList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left5 = document.querySelectorAll('.arrow-left')[4] // 选择第二个轮播图中的左箭头
const arrow_right5 = document.querySelectorAll('.arrow-right')[4] // 选择第二个轮播图中的右箭头

let i5 = 0;
const changeImg5 = () => {
    watch_list5.style.transform = `translateX(${-1070 * i5}px)`
    if (i5 === 0) {
        arrow_left5.style.display = 'none'
    } else if (i5 === Math.floor(len4 / 3)) {
        arrow_right5.style.display = 'none'
    } else {
        arrow_left5.style.display = 'block'
        arrow_right5.style.display = 'block'
    }
    dovList5.forEach(item => {
        item.classList.remove('active')
    })
    dovList5[i5].classList.add('active')
}

ul5.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i5 = parseInt(target.dataset.index)
        changeImg5()
    }
})

arrow_left5.addEventListener('click', () => {
    i5--
    changeImg5()
})

arrow_right5.addEventListener('click', () => {
    i5++
    changeImg5()
})
//第六个 Mac轮播图
const airList = [
    { src: './Air/air1.png', text: 'AirTag四件装',price:'RMB:869'},
    { src: './Air/air2.png', text: 'AirTag黑色' ,price:'RMB:599'},
    { src: './Air/air3.png', text: 'AirTag白色',price:'RMB:699' },
    { src: './Air/air4.png', text: '黑色保护壳',price:'RMB:600'},
    { src: './Air/air5.png', text: '白色保护壳两件装' ,price:'RMB:189'},
    { src: './Air/air6.png', text: '保护壳四件装' ,price:'RMB:869'},
    { src: './Air/air7.png', text: '彩色保护壳四件装' ,price:'RMB:869'},
    { src: './Air/air8.png', text: '粉色' ,price:'RMB:229'},
    { src: './Air/air9.png', text: '珊瑚色' ,price:'RMB:229'},
    { src: './Air/air10.png', text: '白色' ,price:'RMB:159'},
]

const len5 = airList.length
const ul6 = document.querySelectorAll('.dotnav ul')[5] // 选择第二个轮播图中的ul
ul6.innerHTML = [0, 1, 2, 3].map(item => `<li data-index="${item}" class="dot ${item === 0 ? 'active' : ''}"></li>`).join('')
const dovList6 = ul6.querySelectorAll('.dot')

const watch_list6 = document.querySelectorAll('.watch-list')[5] // 选择第二个轮播图中的watch-list
watch_list6.innerHTML = airList.map(item => `
    <div class="section">
        <img src="${item.src}" alt="">
        <div class="text-container">
            <div class="item-text">${item.text}</div>
            <div>${item.price}</div>
        </div>
    </div>`).join('');
const arrow_left6 = document.querySelectorAll('.arrow-left')[5] // 选择第二个轮播图中的左箭头
const arrow_right6 = document.querySelectorAll('.arrow-right')[5] // 选择第二个轮播图中的右箭头

let i6 = 0;
const changeImg6 = () => {
    watch_list6.style.transform = `translateX(${-1070 * i6}px)`
    if (i6 === 0) {
        arrow_left6.style.display = 'none'
    } else if (i6 === Math.floor(len5 / 3)) {
        arrow_right6.style.display = 'none'
    } else {
        arrow_left6.style.display = 'block'
        arrow_right6.style.display = 'block'
    }
    dovList6.forEach(item => {
        item.classList.remove('active')
    })
    dovList6[i6].classList.add('active')
}

ul6.addEventListener('click', (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
        i6 = parseInt(target.dataset.index)
        changeImg6()
    }
})

arrow_left6.addEventListener('click', () => {
    i6--
    changeImg6()
})

arrow_right6.addEventListener('click', () => {
    i6++
    changeImg6()
})

$(document).ready(function() {
    $(".select .navr li").click(function() {
      var index = $(this).index(); // 获取当前点击的 li 索引
      $(".select .navr li").removeClass("selected"); // 移除所有 li 的 selected 类
      $(this).addClass("selected"); // 给当前点击的 li 添加 selected 类
      $(".select .content .list").hide(); // 隐藏所有 content 中的所有 list
      $(".select .content .list").eq(index).show(); // 显示对应索引的 list
    });
  });
// $(document).ready(function() {
//   // 选项卡切换逻辑
//   const tabLinks = $(".select .navr li");
//   const tabContents = $(".select .content .list");
  
//   tabLinks.click(function() {
//     const index = $(this).index();
    
//     // 移除所有选项卡的选中状态
//     tabLinks.removeClass("selected");
//     // 添加当前选项卡的选中状态
//     $(this).addClass("selected");
    
//     // 隐藏所有内容
//     tabContents.hide();
//     // 显示对应索引的内容
//     tabContents.eq(index).show();
//   });
// });